<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <script type="text/javascript" src="../js/jquery.js"></script>
  <script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
  <script type="text/javascript" src="../js/myUtil.js"></script>

  <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap-theme.css">
  <link rel="stylesheet" type="text/css" href="../css/page.css">

</head>
<body>
  <div class="container">

    <!--导航栏-->
    <div class="navigationBar"></div>

    <!--对应界面-->
    <div class="col-md-10">

      <div class="col-md-12" style="border: 1px solid black">
        <div class="col-md-12" style="height: 20px"></div>

        <!--修改头像-->
        <div class="col-md-2"><img class="img-circle" src="head.jpeg" style="width: 100px; height: 100px" id="userHead" alt="头像"></div>
        <div class="col-md-10">
          <label class="col-md-12" style="font-size: 25px; font-weight: bold ;font-family: 微软雅黑,serif;" id="user">用户昵称</label>
          <label class="col-md-12" style="font-size: 18px" id="role">普通用户</label>

          <div class="col-md-12" style="height: 5px"></div>
          &nbsp;&nbsp;&nbsp;
          <button style="border: 1px solid #000000; background: #fff888; " id="changeHead" onclick="changeHead()">修改头像</button>
          <input type="file" name="userHead" style="display: none" id="selectHead" onchange="selectOnchange()">

        </div>
        <div class="col-md-12" style="height: 30px"></div>

        <!--修改密码-->
        <label class="col-md-12" style="font-size: 14px; text-align: right; cursor: pointer; color: #0000cc" status = "0" id="changeLabel" onclick="changeItem()">修改密码</label>
        <!--修改基本信息-->
        <div class="col-md-12" style="border-top: 1px solid gray; height: 40px"></div>

        <!--修改密码栏-->
        <div class="col-md-12" style="display: none" id="changeUserPassItem">
          <div class="row" style="font-size: 17px">
            <label class="col-md-2  col-md-offset-1">旧密码：</label>
            <input class="col-md-6" type="password" style="padding: 5px" id="oldUserPass"/>
          </div>
          <br>

          <div class="row" style="font-size: 17px">
            <label class="col-md-2  col-md-offset-1">新密码：</label>
            <input class="col-md-6" type="password" style="padding: 5px" id="newUserPass"/>
          </div>
          <br>

          <div class="row" style="font-size: 17px">
            <label class="col-md-2  col-md-offset-1">再次输入：</label>
            <input class="col-md-6" type="password" style="padding: 5px" id="reEnterUserPass"/>
          </div>
          <br>
          <label class="col-md-6 col-md-offset-3" style="font-size: 14px; color: #FF0000; height: 30px" id="tip"></label>

          <button class="col-md-3 col-md-offset-4" style="border: 1px solid black; background: #FFF888; height: 40px" onclick="saveUserPass()">确认修改</button>
        </div>

        <!--基本信息栏-->
        <div id="userDataItem">
          <div class="col-md-5 row-no-gutters">
            <label class="col-md-12" style="font-size: 14px; color: #444444">用户名：</label>
            <input class="col-md-12" style="font-size: 20px; padding: 5px;" readonly="readonly" type="text" id="userName">
          </div>
          <div class="col-md-5 col-md-offset-1 row-no-gutters">
            <label class="col-md-12" style="font-size: 14px; color: #444444">身份：</label>
            <input class="col-md-12" style="font-size: 20px; padding: 5px" readonly="readonly" type="text" id="userRole">
          </div>

          <div class="col-md-12" style="height: 40px"></div>

          <div class="col-md-5 row-no-gutters">
            <label class="col-md-12" style="font-size: 14px; color: #444444">昵称：</label>
            <input class="col-md-12" style="font-size: 20px; padding: 5px" type="text" id="nickName">
          </div>
          <div class="col-md-5 col-md-offset-1 row-no-gutters">
            <label class="col-md-12" style="font-size: 14px; color: #444444">性别：</label>
            <button class="col-md-4" style="border: 1px solid gray; height: 40px; background: white" id="boy" onclick="selectSex(1)">男</button>
            <button class="col-md-4" style="border: 1px solid gray; height: 40px; background: white" id="girl" onclick="selectSex(2)">女</button>
            <button class="col-md-4" style="border: 1px solid gray; height: 40px; background: white" id="secret" onclick="selectSex(0)">保密</button>
          </div>

          <div class="col-md-12" style="height: 40px"></div>

          <div class="col-md-11 row-no-gutters">
            <label class="col-md-12" style="font-size: 14px; color: #444444">个人简介：</label>
            <textarea class="col-md-12" style="font-size: 20px; padding: 5px; height: 100px" id="userResume"></textarea>
          </div>

          <div class="col-md-12" style="height: 40px"></div>
          <button class="col-md-3 col-md-offset-4" style="border: 1px solid black; background: #FFF888; height: 40px" id="save" onclick="save()">保存修改</button>
        </div>

        <div class="col-md-12" style="height: 20px"></div>
      </div>

    </div>

  </div>

  <script type="text/javascript">
    const selectHead = $("#selectHead");
    let userSex;

    // 引入导航栏
    $(".navigationBar").load("navigationBar.html", function (){
      $("#userData").css("color", "red");
    });

    // 请求得到用户信息
    $.post("/QG_PostBar/user?method=getUserBySession", function (data){
      user = data;
      $("#user").html(user.userName + "（我）");
      if (user.userHead != null) {
        $("#userHead").attr("src", "/QG_PostBar/user_head/" + user.userHead);
      }
      $("#userName").attr("value", user.userName);
      $("#userRole").attr("value", user.userRole === 0 ? "普通用户": "系统管理员");
      $("#nickName").attr("value", user.nickName);
      $("#userResume").html(user.userResume);
      selectSex(user.userSex);
    }, "json");

    // 性别选择器
    function selectSex(sex) {
      userSex = sex;
      $("#boy").css("backgroundColor", "white");
      $("#girl").css("backgroundColor", "white");
      $("#secret").css("backgroundColor", "white");

      switch (sex) {
        case 0 : $("#secret").css("backgroundColor", "#DDDDDD"); break;
        case 1 : $("#boy").css("backgroundColor", "#99DDFF"); break;
        case 2 : $("#girl").css("backgroundColor", "#FAAAFF"); break;
      }
    }

    // 使用别的按钮调用文件上传界面
    function changeHead() {
      selectHead.click();
    }

    // 文件上传后，检查上传的文件是否符合要求，是则上传
    function selectOnchange() {
      //判断文件类型,是否为指定格式的图片
      const suffix = selectHead.val().substring(selectHead.val().lastIndexOf(".") + 1).toLowerCase();
      if(!(suffix === "png" || suffix ==="jpg" || suffix === "jpeg")){
        alert("必须上传 png、jpg 或 jpeg 格式的图片!");
        return false;
      }

      //判断文件大小
      const size = selectHead[0].files[0].size;
      if (size > 5 * 1024 * 1024) {
        alert("图片大小不能大于 5M! ");
        return false;
      }

      // 一切就绪，上传图片！！！
      const formData = new FormData();
      formData.append("file", selectHead[0].files[0]);
      $.ajax({
        type : "post",
        url : "/QG_PostBar/user?method=setUserHead",
        data : formData,
        processData : false,
        contentType : false,
        success : function(data){
          if (data === "error") {
            alert("头像上传失败!");
          } else {
            $("#userHead").attr("src", "/QG_PostBar/user_head/" + data);
          }
        }
      });
    }

    // 保存用户信息修改
    function save() {
      user.nickName = $("#nickName").val();
      user.sex = userSex;
      user.userResume = $("#userResume").val();

      $.post("/QG_PostBar/user?method=changeUser", {"nickName": user.nickName, "userResume": user.userResume, "userSex" : userSex}, function (data){
        if (data !== "success") {
          alert("修改失败！");
        }
      });
    }

    // 保存用户新密码
    function saveUserPass() {
      // 获取到旧密码、新密码和新密码再次输入
      let oldUserPass = $("#oldUserPass").val();
      let newUserPass = $("#newUserPass").val();
      let reEnterUserPass = $("#reEnterUserPass").val();

      // 先判断新密码的位数是否大于等于 6 位
      if (newUserPass.length < 6) {
        $("#tip").html("密码长度必须大于等于 6，请重新输入！");
      }
      // 再判断两个新密码是否一致
      else if (newUserPass === reEnterUserPass) {
        // 可以的话再向服务器发送修改请求
        $.post("/QG_PostBar/user?method=changeUserPass", {"oldUserPass": oldUserPass, "newUserPass": newUserPass}, function (data) {
          if (data === "success") {
            $("#tip").html("修改密码成功！");
          } else {
            $("#tip").html("旧密码输入错误，请重新输入！");
          }
        });
      } else {
        $("#tip").html("两次密码输入不一致，请重新检查！");
      }
    }


    // 修改密码栏和基本信息栏的转换
    function changeItem() {
      let changeLabel = $("#changeLabel");
      let which = changeLabel.attr("status");

      // 0 表示要修改密码了，显示修改密码栏，隐藏基本信息栏，否则反之
      if (which === "0") {
        changeLabel.html("取消修改");
        changeLabel.attr("status", "1");
        $("#changeUserPassItem").show();
        $("#userDataItem").hide();
      } else {
        changeLabel.html("修改密码");
        changeLabel.attr("status", "0");
        $("#changeUserPassItem").hide();
        $("#userDataItem").show();
      }
    }
  </script>
</body>
</html>